<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import { fetchUnReadMessageAPI } from "@/api/userApi.ts";

const active: Ref<number> = ref<number>(0);
const count = ref(0);

const fetchUnReadMessage = async () => {
    const {data} = await fetchUnReadMessageAPI();
    count.value=data
};

onMounted(() => {
    fetchUnReadMessage();
});
</script>

<template>
    <van-tabbar v-model="active">
        <van-tabbar-item to="/">
            <span>首页</span>
            <template #icon="{active}">
                <svg-icon :svg-name="`home-${active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/article">
            <span>健康百科</span>
            <template #icon="{active}">
                <svg-icon :svg-name="`article-${active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/notify" :badge="count">
            <span>消息中心</span>
            <template #icon="{active}">
                <svg-icon :svg-name="`notice-${active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="user">
            <span>我的</span>
            <template #icon="{active}">
                <svg-icon :svg-name="`user-${active?`active`:`default`}`" width="24px" height="24px"></svg-icon>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

